<template>
  <div class="read">
    <router-link tag="div" to="/know" class="read-wrap" v-for="(item,index) in chapters" :key="index">
      <h1>{{ item.title }}</h1>
      <div class="text">
        <img :src="item.read_pic" alt="">
        <p>{{ item.text }}</p>
      </div>
      <span><i>{{ item.record }}</i>&nbsp;次阅读</span>
    </router-link>
  </div>
</template>

<script>
  export default {
    name:"Read",
    data(){
      return{
        chapters:[
          {
            title:"八大零食安全隐患，你中了几个？",
            read_pic:require("../../../assets/pimages/zhishi1.jpg"), // 212*141
            text:"即使很多标榜“安全”的零食村上春树大额，也存在很多隐患。",
            record:25388
          },
          {
            title:"感冒了好衰啊...吃什么才好得快？",
            read_pic:require("../../../assets/pimages/zhishi2.jpg"),
            text:"冬天的感冒就仿佛是秋天的盛世嫡妃水了落叶，春天的百花般，总是当时的发生更按时到来。无论现在的你...",
            record:38489
          },
          {
            title:"感冒了好衰啊...吃什么才好得快？",
            read_pic:require("../../../assets/pimages/zhishi2.jpg"),
            text:"冬天的感冒就仿佛是秋天的盛世嫡妃水了落叶，春天的百花般，总是当时的发生更按时到来。无论现在的你...",
            record:38489
          }
          
        ]
      }
    }
  }
</script>

<style scoped>
.read{
  width: 100%;
  margin-top: 0.1rem;
}
.read-wrap{
  width: 95%;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 0.1rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid lightgray;
}
.text{
  width: 100%;
  padding-top: 0.2rem;

}
.read-wrap .text p{
  font-size: 12px;
  display: block;
  color: #9e9e9e;
  padding-left: 2.3rem;

}
.text img{
  width: 2.12rem;
  height: 1.41rem;
  float: left;
}
.read-wrap span{
  position: absolute;
  bottom: 0;
  color: #9e9e9e;
  font-size: 12px;
  right: 5px;
}
.read-wrap span i{
  color: #ff8282;
}
</style>